<template>
    <div class="group">
        <div class="more" v-if="instance.has_next" @click="() => instance.getPage(true)">获取更多</div>
        <div style="height: 10px;"></div>
        <template v-for="item, index in instance.list" :key="item.id">
            <div :class="item.isSelf ? 'self_message flex' : 'flex'">
                <div>
                    <Image width="40" height="40" round :src="item.User?.fullUrl"></Image>
                </div>
                <div style="width: 20px;"></div>
                <div style="max-width: 70%;">
                    <div class="nickname">{{ item.User?.nickname }}</div>
                    <Popover trigger="click" v-model="item.show">
                        <div @click="item.show = false" style="padding: 4px 8px;">
                            <template v-for="it, prop in instance.controls" :key="prop">
                                <component v-if="it.show(item)" :is="it.formatter(item, index)"></component>
                            </template>
                        </div>
                        <template #reference>
                            <Message :messages="instance.messages" :item="item"></Message>
                        </template>
                    </Popover>
                </div>
            </div>
        </template>
        <div style="font-size: 0.8em;text-align: right;color:var(--van-primary-color)">
            <template v-if="instance.notReadUser?.length">{{ instance.notReadUser }} 未读</template>
            <span v-else style="color: var(--van-text-color-2);">全部已读</span>
        </div>
    </div>
    <div style="padding:8px 12px;display:flex;">
        <template v-for="item, prop in instance.menus" :key="prop">
            <component :is="item.p_formatter()"></component>
        </template>
    </div>
    <div style="display: flex;align-items: flex-end;background-color: var(--van-background);padding: 0 4px 12px 4px"
        id="groupInput">
        <Field type="textarea" :model-value="instance.message" :placeholder="instance.placeholder"
            @update:model-value="(value) => instance.messageChange(value)" :rows="4" resize="none" :maxlength="400"
            show-word-limit @keydown.enter="() => instance.sendMessage()">
        </Field>
        <div style="width: 20px;"></div>
        <Button style="white-space: nowrap;" type="primary" @click="() => instance.sendMessage()">发送</Button>
    </div>
    <div v-if="instance.newMessage" class="newMessage" @click="() => instance.scrollIntoBottom()">
        {{ instance.newMessage }}条新消息
    </div>
</template>

<script setup lang="ts">
import { Field, Button, Image, Popover } from "vant";
import { GroupForm } from "@b/model/base/form";
import { onMounted, onUnmounted } from "vue";
import Message from "./components/group_message.vue";

interface prop {
    instance: GroupForm
}

const { instance } = defineProps<prop>()
const emit = defineEmits(['afterReaded']);

(async () => {
    await instance.getPage()
    emit('afterReaded')
    instance.getNewMessage()
    instance.scrollIntoBottom()
})()
onMounted(() => {
    document.getElementById('scroll')?.addEventListener('scroll', instance.checkedScrollBottom.bind(instance))
})
onUnmounted(() => {
    clearTimeout(instance.timer);
    document.getElementById('scroll')?.removeEventListener('scroll', instance.checkedScrollBottom.bind(instance))
})
</script>

<style scoped>
.group {
    min-height: 600px;
    background-color: var(--van-background-2);
    padding: 10px;
    border-radius: 6px;
}

.message {
    word-break: break-all;
    padding: 10px;
    border: 1px solid var(--van-border-color);
    border-radius: 10px;
}

.self_message .message {
    border-color: var(--van-primary-color);
    text-align: right;
}

.self_message .nickname {
    text-align: right;
}

.message_img {
    width: 100px;
    height: 100px;
}

.message_delete {
    font-size: 0.8em;
    color: var(--van-text-color-2);
}

.avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%
}

.flex {
    display: flex;
    margin-bottom: 20px;
}

.self_message {
    flex-direction: row-reverse;
}

.nickname {
    margin-bottom: 6px;
}

.message_img {
    width: 100px;
    height: 100px;
}

.more {
    color: var(--van-text-color-2);
    font-size: 0.85em;
    text-align: center;
    cursor: pointer;
}

.newMessage {
    position: fixed;
    bottom: 20px;
    right: 20px;
    cursor: pointer;
    background-color: var(--van-background);
}
</style>